<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <title>Hello, world!</title>
    <style type="text/css">
        html,
        body {
            height: 100%;
            background-color: #f8f9fa;
        }

        .leftSideNavBar {
            height: 100%;
            width: 10%;
            background-color: #333f46;
            display: inline-block;
            bottom: 0px;
        }

        .rightContent {
            display: inline-block;
            width: 90%;
            height: 100%;
            vertical-align: top;
            float: right;
            position: relative;
        }

        .headerNav {
            width: 100%;
            height: auto;
        }

        .breadClums {
            width: 100%;
            height: auto;
            overflow: hidden;

        }

        ol.breadcrumb {
            margin-bottom: 5px;

        }

        .operateNav {
            width: 100%;
            position: relative;

        }

        .operateNav-item,
        .checkoperate,
        a.nav-link {
            display: inline-block;
            vertical-align: middle;
            box-sizing: border-box;
        }

        .checkoperate {
            margin-left: 10px;
        }

        #inputGroupSelect01 {
            top: -20px;
            width: 120px;
            height: 31px;
            padding: 5px;
            margin-top: 1px;
            vertical-align: middle;

        }

        .operatedropdown {
            display: inline-block;
            vertical-align: top;
            position: static;
        }

        .nothing {
            width: 32px;
            display: inline-block;
        }

        #client {
            height: 31px;
            padding: 5px;
            margin-top: 5px;
            position: relative;

        }
        .tablechecked{
        background-color: #b8daff;
        color:white;
        
        }
        .dropdown-menu {
            left: auto;
        }

        .dropdown-menu>li {
            display: block;
        }

        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu>.dropdown-menu {
            top: -5%;
            left: 95%;
            margin-top: 5px;
        }

        .dropdown-submenu:hover>.dropdown-menu {
            display: block;
        }
    </style>
</head>

<body>

    <!-- 侧导航条 -->
    <div class='leftSideNavBar'>
        <ul class="nav flex-column" style="position: relative;top:35%;">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item dropright">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">Disabled</a>
            </li>
        </ul>
    </div>


    <!-- 右边内容 -->
    <div class="rightContent">
        <!-- header导航条 -->
        <div class='headerNav'>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" style="font-family: 微软雅黑">兴隆水泵有限公司</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div id="searchbar" class="collapse navbar-collapse" id="navbarSupportedContent">
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="text" placeholder="库存" list="stored">
                        <datalist id="stored">
                            <option value="sun">1111</option>
                            <option>1121</option>
                            <option>你好孙</option>
                            <option>1141</option>
                            <option>1151</option>
                        </datalist>
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                    </form>
                </div>
            </nav>
        </div>
        <!-- 导航条面包屑 -->
        <div class='breadClums'>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="#">首页</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="#">销售单据</a>
                    </li>
                </ol>
            </nav>
        </div>
        <!-- 操作导航条 -->
        <div class="operateNav">
            <ul class="nav nav-pills">
                <li class="nav-item operateNav-item">
                    <a class="nav-link " href="#">打印</a>
                </li>
                <li class="nav-item operateNav-item">
                    <a class="nav-link" href="#">增加</a>
                </li>
                <li class="nav-item operateNav-item">
                    <a class="nav-link" href="#">修改</a>
                </li>
                <div class="nav-item operateNav-item" id="checktime">
                    <a class="nav-link" href="#">查询方案:</a>
                    <div class="checkoperate">
                        <label class="checkoperatelable" for="inputGroupSelect01"></label>
                        <select class="custom-select btn-sm" id="inputGroupSelect01" onchange="window.location.href=this.value">
                            <option value="?check=">年度查询</option>
                            <option value="?check=2">季度查询</option>
                            <option value="?check=3" selected>月度查询</option>
                        </select>
                    </div>
                    <div class="nothing"></div>
                    <div class="dropdown operatedropdown">
                        <input id="client" type="text" name="" class="dropdown-toggle form-control btn-sm" data-toggle="dropdown" placeholder="客户">
                        <ul class="dropdown-menu" data-toggle="dropdown" id="clientmenu">
                            <li class="dropdown-submenu">
                                <a class="dropdown-item" href="?aaa" data-toggle="dropdown"></a>
                            </li>
                            <li class="dropdown-submenu">
                                <a class="dropdown-item" href="?aaa" data-toggle="dropdown">Action</a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="?aaaa">123</a>
                                    <a class="dropdown-item" href="#">An1231n</a>
                                    <a class="dropdown-item" href="#">Som12321here</a>
                                </div>
                            </li>
                            <li class="dropdown-submenu">
                                <a class="dropdown-item" href="?aaa" data-toggle="dropdown">Action2</a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="?aaaa">dfghdfg</a>
                                    <a class="dropdown-item" href="#">An1231n</a>
                                    <a class="dropdown-item" href="#">Som12321here</a>
                                </div>
                            </li>
                            <li class="dropdown-submenu">
                                <a class="dropdown-item" href="?aaa" data-toggle="dropdown">Action3</a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="?aaaa">asdads</a>
                                    <a class="dropdown-item" href="#">An1231n</a>
                                    <a class="dropdown-item" href="#">Som12321here</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- 选择客户2级下拉单   -->

            </ul>
        </div>
        <!-- 销售历史单据表 -->
        <div id="salesTable">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col" style="width: 10%"></th>
                        <th scope="col" style="width: 10%">单据号</th>
                        <th scope="col" style="width: 10%">单据日期</th>
                        <th scope="col" style="width: 20%">客户</th>
                        <th scope="col" style="width: 5%">金额</th>
                        <th scope="col" style="width: 45%">备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                            <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <th>2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <th>2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <th style="z-index: 10;">2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <th scope="row">2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                        <td>@mdo</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        // 客户下拉表单写入input
        $("#clientmenu").on("click", "a", function () {
            window.location.href = this.href
        });
        //表单点击行选中复选框
        $("table").on("click", "tr", function () {
        if($(this).find("input").eq(0).is(':checked')){
            $(this).find("input").eq(0).prop('checked', false);
            $(this).eq(0).removeClass("tablechecked");
        }
        else{
        var trs = $(this).parent("tbody").find('tr').find("input");
        trs.prop('checked', false);
        $(this).parent("tbody").find('tr').removeClass("tablechecked");
        $(this).find("input").eq(0).prop('checked', true);
        $(this).eq(0).addClass("tablechecked");
            }
    });
    </script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>

</html>